<template>
  <div class="step-input" @click.stop>
    <button
      @click="$emit('change', num - 1)"
      :disabled="num <= min"
    >-</button>
    <input type="text" :value="num">
    <button
      @click="$emit('change', num + 1)"
      :disabled="num >= max"
    >+</button>
  </div>
</template>

<script>
export default {
  // 传入的 props 是不允许修改的
  // props: ['num'],
  props: {
    num: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="sass">
  .step-input
    width: 120px
    height: 40px
    display: inline-flex
    button, input
      flex: 1
      text-align: center
      width: 40px
</style>
